// 使用$声明变量--以后使用的时候也必须把$带上
$co-lor : pink ;

@import 'reset';

.header {
    // height: $a;   // 变量的作业域
    background-color: #000;

    ul {
        $a : 200px;
        width: 1200px;
        background-color: #eee;

        > li {
            width: $a / 2;
            color: $co-lor;

            h1 , h2 , h3 {
                color: blue;
            }
        }
    }
    
}



.a {
    background-color: $co_lor;
    // &替代父级选择器
    &:hover {
        background-color: #000  ;
    }
}



@mixin btn {
    width: 100px;
    height: 40px;
    border: 1px solid #000;
    background-color: #eee;
}

@mixin btns($w , $h) {
    width: $w;
    height: $h;
    border: 1px solid #000;
    background-color: #eee;
}


.footer {
    button {
        @include btns(100px , 50px) ;
    }
}



.c {
    width: 200px;
    height: 200px;
    background-color: #f00;
}


.d {
    @extend .c ;
    color: beige;
}